<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="fetchManufacturerConfiguration"
    :columns="columns"
    :row-selection="rowSelection"
    row-key="id"
  >
    <template #toolbars>
      <Space>
        <b-button icon="add" @click="onAdd">新增</b-button>
        <b-button
          icon="delete"
          :disabled="!selectKeys?.length"
          @click="onDelete"
          >删除</b-button
        >
      </Space>
    </template>
    <template #operation="{ record }">
      <b-button @click="() => onView(record)">详情</b-button>
    </template>
  </ProTable>
  <FormModal :items="items"> </FormModal>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { Modal, Space } from 'ant-design-vue';
import { ProFormProps } from '@/components/ProForm';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { useFormModal } from '@/hooks/formModal';
import {
  createManufacturerConfiguration,
  deleteManufacturerConfiguration,
  fetchManufacturerConfiguration,
  updateManufacturerConfiguration,
} from '@/api/station';

const tableRef = ref();

const init = () => {};

init();

const selectKeys = ref<number[]>([]);
const rowSelection = ref<ProTableProps['rowSelection']>({
  onChange(values) {
    selectKeys.value = values as number[];
  },
});

const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '序号',
    dataIndex: 'index',
    customRender({ pageSize, pageNum, index }) {
      return (pageNum.value - 1) * pageSize.value + index + 1;
    },
  },
  {
    title: '厂商名称',
    dataIndex: 'name',
  },
  {
    title: '厂商简称',
    dataIndex: 'code',
  },
  {
    title: '备注',
    dataIndex: 'remark',
    hideInSearch: true,
  },
  {
    title: '创建人',
    dataIndex: 'createBy',
    hideInSearch: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    hideInSearch: true,
  },
  {
    title: '更新人',
    dataIndex: 'updateBy',
    hideInSearch: true,
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
  },
]);

const items = computed<ProFormProps['items']>(() => [
  {
    label: '厂商名称',
    type: 'input',
    field: 'name',
    rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    props: {
      placeholder: '请输入名称',
    },
  },
  {
    label: '厂商简称',
    type: 'input',
    field: 'code',
    props: {
      placeholder: '请输入简称',
      precision: 4,
      min: -180,
      max: 180,
    },
  },
  {
    label: '备注',
    type: 'input',
    field: 'remark',
    props: {
      placeholder: '请输入备注',
      precision: 4,
      min: -90,
      max: 90,
    },
  },
]);

const { FormModal, open } = useFormModal({ size: 'small' });

const onAdd = async () => {
  open({
    title: '新增',
    defaultValue: {},
    serviceApi: async (params: any): Promise<any> => {
      await createManufacturerConfiguration(params);
      tableRef.value.refresh();
    },
  });
};

const onView = async (record: any) => {
  open({
    title: (type) => (type === 'info' ? '详情' : '编辑'),
    modalType: 'info',
    defaultValue: {
      ...record,
    },
    serviceApi: async (params: any): Promise<any> => {
      await updateManufacturerConfiguration({
        ...params,
        id: record.id,
      });
      tableRef.value.refresh();
    },
  });
};

const sleep = (cb) => {
  setTimeout(() => {
    cb();
  }, 500);
};
const onDelete = async () => {
  Modal.confirm({
    title: '系统提示',
    content: `确认要删除当前选项？`,
    onOk: async () => {
      await deleteManufacturerConfiguration(selectKeys.value);
      sleep(() => tableRef.value.refresh());
      selectKeys.value = [];
    },
  });
};
</script>
